<template>
	<!-- 左边导航条 -->
	<div class='leftNav'>
		<!-- logo -->
		<div class='logo'></div>

		<!-- 在线音乐 -->
		<div class='online_music'>
			<dl>
				<dt>在线音乐</dt>
				<dd class='icon_dd dd_1_black' @click="one">推荐</dd>
				<dd class='icon_dd dd_2_black'>音乐馆</dd>
				<dd class='icon_dd dd_3_black'>视频</dd>
				<dd class='focusDd icon_dd dd_4_white'>电台</dd>
			</dl>
		</div>

		<!-- 我的音乐 -->
		<div class='my_music'>
			<dl>
				<dt>在线音乐</dt>
				<dd class='focusDd icon_dd dd_5_white'>我喜欢</dd>
				<dd class='icon_dd dd_6_black'>本地和下载</dd>
				<dd class='icon_dd dd_7_black'>最近播放</dd>
				<dd class='icon_dd dd_8_black'>试听列表</dd>
			</dl>
		</div>

		<!-- 创建歌单 -->
		<div class='created_song_list'>
			<dl>
				<dt>创建歌单</dt>
				<dd class='focusDd'>1111</dd>
				<dd>默认列表</dd>
			</dl>
		</div>

		<!-- 收藏的歌单 -->
		<div class='favorite_song_list'>
			<dl>
				<dt>收藏的歌单</dt>
				<dd class='focusDd'>怀旧老歌曲</dd>
			</dl>
		</div>
		<tuijian/>
	
	</div>
</template>

<script >
import tuijian from './tuijian.vue'
import router from '../router/index'
export default {
	setup() {

return{
	router,
	tuijian
}
	}
}
</script>

<style >
/* 左边导航条*/
.leftNav {
	width: 210px;
	height: 100%;
	background: #f0f0f0;
	position: absolute;
	left: 0;
	top: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}

.leftNav .logo {
	width: 100%;
	height: 85px;
	background: url('../资源/logo.jpg') no-repeat center;
}

/*在线音乐 */
.leftNav .online_music {
	width: 160px;
	margin: 20px auto 30px auto;
}

.leftNav .online_music dt {
	height: 47px;
	line-height: 47px;
	color: #787878;
}

.leftNav .online_music dd {
	height: 30px;
	line-height: 30px;
	color: #303030;
	border-radius: 5px;
	padding-left: 39px;
	margin-bottom: 10px;
	cursor: pointer;
}

/*dd被选中*/
.leftNav .online_music dd.focusDd {
	background-color: #1ed0a1;
	color: #d2f6ee;
}

/*dd的hover样式*/
.leftNav .online_music dd:hover {
	background: #d8d8d8;
}

/*dd的icon图标*/
.leftNav .online_music dd.icon_dd {
	background-size: 22px;
	background-repeat: no-repeat;
	background-position: 9px center;
}

.leftNav .online_music dd.dd_1_white {
	background-image: url('../资源/left_Icon_1_white.png');
}

.leftNav .online_music dd.dd_1_black {
	background-image: url('../资源/left_Icon_1_black.png');
}

.leftNav .online_music dd.dd_2_white {
	background-image: url('../资源/left_Icon_2_white.png');
}

.leftNav .online_music dd.dd_2_black {
	background-image: url('../资源/left_Icon_2_black.png');
}

.leftNav .online_music dd.dd_3_white {
	background-image: url('../资源/left_Icon_3_white.png');
}

.leftNav .online_music dd.dd_3_black {
	background-image: url('../资源/left_Icon_3_black.png');
}

.leftNav .online_music dd.dd_4_white {
	background-image: url('../资源/left_Icon_4_white.png');
}

.leftNav .online_music dd.dd_4_black {
	background-image: url('../资源/left_Icon_4_black.png');
}

/*我的音乐*/
.leftNav .my_music {
	width: 160px;
	margin: 20px auto 30px auto;
}

.leftNav .my_music dt {
	height: 47px;
	line-height: 47px;
	color: #787878;
}

.leftNav .my_music dd {
	height: 30px;
	line-height: 30px;
	color: #303030;
	border-radius: 5px;
	padding-left: 39px;
	margin-bottom: 10px;
	cursor: pointer;
}

/*dd被选中*/
.leftNav .my_music dd.focusDd {
	background-color: #1ed0a1;
	color: #d2f6ee;
}

/*dd的hover样式*/
.leftNav .my_music dd:hover {
	background: #d8d8d8;
}

.leftNav .my_music dd.icon_dd {
	background-size: 22px;
	background-repeat: no-repeat;
	background-position: 9px center;
}

.leftNav .my_music dd.dd_5_white {
	background-image: url('../资源/left_Icon_5_white.png');
}

.leftNav .my_music dd.dd_5_black {
	background-image: url('../资源/left_Icon_5_black.png');
}

.leftNav .my_music dd.dd_6_white {
	background-image: url('../资源/left_Icon_6_white.png');
}

.leftNav .my_music dd.dd_6_black {
	background-image: url('../资源/left_Icon_6_black.png');
}

.leftNav .my_music dd.dd_7_white {
	background-image: url('../资源/left_Icon_7_white.png');
}

.leftNav .my_music dd.dd_7_black {
	background-image: url('../资源/left_Icon_7_black.png');
}

.leftNav .my_music dd.dd_8_white {
	background-image: url('../资源/left_Icon_8_white.png');
}

.leftNav .my_music dd.dd_8_black {
	background-image: url('../资源/left_Icon_8_black.png');
}

/*创建歌单*/
.leftNav .created_song_list {
	width: 160px;
	margin: 20px auto 30px auto;
}

.leftNav .created_song_list dt {
	height: 47px;
	line-height: 47px;
	color: #787878;
}

.leftNav .created_song_list dd {
	height: 30px;
	line-height: 30px;
	color: #303030;
	border-radius: 5px;
	margin-bottom: 10px;
	cursor: pointer;
	padding-left: 11px;
}

/*dd被选中*/
.leftNav .created_song_list dd.focusDd {
	background-color: #1ed0a1;
	color: #d2f6ee;
}

/*dd的hover样式*/
.leftNav .created_song_list dd:hover {
	background: #d8d8d8;
}

/*收藏的歌单*/
.leftNav .favorite_song_list {
	width: 160px;
	margin: 20px auto 30px auto;
}

.leftNav .favorite_song_list dt {
	height: 47px;
	line-height: 47px;
	color: #787878;
}

.leftNav .favorite_song_list dd {
	height: 30px;
	line-height: 30px;
	color: #303030;
	border-radius: 5px;
	margin-bottom: 10px;
	cursor: pointer;
	padding-left: 11px;
}

/*dd被选中*/
.leftNav .favorite_song_list dd.focusDd {
	background-color: #1ed0a1;
	color: #d2f6ee;
}

/*dd的hover样式*/
.leftNav .favorite_song_list dd:hover {
	background: #d8d8d8;
}
</style> 